<template>
  <div class="app-container">
    <el-container>
      <div class="all">
        <div align="center" class="title">
          <H3>
            <span :style="{ 
              color: formData.status == '1' ? '#F56C6C' : '#67C23A'
            }">
                {{ formData.status == '1' ? '未审核' : '已审核' }}
            </span>
            {{formData.compname}}
          </H3>
        </div>


        <div class="content" >
          <el-collapse v-model="activeName">
            <el-collapse-item title="第一部分 部门单位概况" name="part1">
              <el-collapse-item title="一、主要职能" name="part1.1">
                <div>
                  <label>主要职能<span style="color: red">*</span></label>
                  <div>
                    <el-input
                    v-model="zyzn"
                    style="width: 1600px"
                    :rows="2"
                    type="textarea"
                    placeholder="详细介绍本部门（单位）工作职能。"
                    />
                  </div>
                  
                </div>
              </el-collapse-item>
              <el-collapse-item title="二、机构设置及人员情况" name="part1.2">
                <div>
                  <span>{{formData.compname}}{{formData.year}}年度，实有人数{{formData.compname}}人，其中：在职人员582人，离休人员1人，退休人员333人。</span>

                </div>
              </el-collapse-item>
              
            </el-collapse-item>
            <el-collapse-item title="第二部分 部门决算情况说明" name="part2">
              <el-collapse-item title="一、收入支出决算总体情况说明" name="part2.1">
                <div>
                  <p>2023年度收入总计595.45万元，其中：本年收入合计585.14万元，使用非财政拨款结余9.79万元，年初结转和结余0.52万元。</p>
                  <p>2023年度支出总计595.45万元，其中：本年支出合计594.80万元，结余分配0.00万元，年末结转和结余0.65万元。</p>
                  <p>收入支出总体与上年相比，增加67.36万元，增长12.76%，</p>
                  <div>
                    <label>主要原因是：<span style="color: red">*</span></label>
                    <div>
                      <el-input
                      v-model="srzc"
                      style="width: 1600px"
                      :rows="2"
                      type="textarea"
                      placeholder="请输入内容。"
                      />
                    </div>
                  </div>
                </div>
              </el-collapse-item>
              <el-collapse-item title="二、收入决算情况说明" name="part2.2">
                <div>
                  <p>本年收入585.14万元，其中：财政拨款收入584.86万元，占99.95%；上级补助收入0.00万元，占0.00%；事业收入0.00万元，占0.00%；经营收入0.00万元，占0.00%；附属单位上缴收入0.00万元，占0.00%；其他收入0.27万元，占0.05%。</p>
                  <div>
                    <label>主要原因是：<span style="color: red">*</span></label>
                    <div>
                      <el-input
                      v-model="sr"
                      style="width: 1600px"
                      :rows="2"
                      type="textarea"
                      placeholder="请输入内容。"
                      />
                    </div>
                  </div>
                </div>
              </el-collapse-item>
              <div>
                Visual feedback: reflect current state by updating or rearranging
                elements of the page.
              </div>
            </el-collapse-item>
            <el-collapse-item title="第三部分 专业名词解释" name="part3">
              <div>
                Simplify the process: keep operating process simple and intuitive;
              </div>
              <div>
                Definite and clear: enunciate your intentions clearly so that the
                users can quickly understand and make decisions;
              </div>
              <div>
                Easy to identify: the interface should be straightforward, which helps
                the users to identify and frees them from memorizing and recalling.
              </div>
            </el-collapse-item>
            
          </el-collapse>

        </div>
        
      </div>
      <el-main>
        
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script setup name="EditMain">
import { listEditMain, getEditMain, updateEditMain} from "@/api/finFilling/editMain";
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { getMain } from '@/api/finFilling/main'; // 假设这是你用来获取数据的API函数

const { proxy } = getCurrentInstance();
const { sys_job_status } = proxy.useDict('sys_job_status');

const mainList = ref([]);
const open = ref(false);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");


const formData = ref({}); // 存储从后端获取的数据
const loading = ref(true); // 加载状态
const errorMessage = ref(''); // 错误信息
const route = useRoute();
const mainId = ref(route.params.mainId);

async function loadData(id) {
  try {
    const response = await getMain(id);
    formData.value = response.data; // 假设response.data是你要的数据
  } catch (error) {
    console.error("Failed to load data", error);
    errorMessage.value = "加载数据时发生错误，请稍后再试";
  } finally {
    loading.value = false;
  }
}

// 组件挂载时调用loadData函数
onMounted(() => {
  if (mainId.value) {
    loadData(mainId.value);
  } else {
    errorMessage.value = "无效的ID";
    loading.value = false;
  }
});

</script>

<style>
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.content {
  font-size: 36px;
}
</style>